<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  1. npm i init -y 下载初始化包管理配置文件
  2. npm i jquery -S 下载jq包 （此时浏览器不兼容es6的导入jq包的方式布局，需要搭建webpack）

  webpack: 代码压缩，处理浏览器端js的兼容性，以及性能优化
  开始搭建webpack

  1.安装webpack相关的俩个包
  npm i webpack@5.5.1 webpack-cli@4.2.0 -D // -D开发时使用 -S开发和上线时都可以使用

  2.创建名为webpack.config.js的webpack配置文件 // 在这里配置 webpack
  详情进文件看

  3.在package.json 文件进行如下配置
  "scripts": {
  "dev": "webpack" // dev 运行项目的命令 npm run dev
  },

  4. 运行 npm run serve 命令后 项目中多了一个 dist 文件夹
  该目录下为main.js 是 index.js的入口文件
  将
  <script src="./index.js"></script> 改为
  <script src="../dist/main.js"></script> 解决 浏览器不兼容 es6语法的问题
  每一次修改 index.js代码都要执行 npm run serve

  5.webpack默认约定
  默认的打包入口文件为 src -> index.js
  默认的输出文件路径 dist -> main.js
  output: {
  path: path.join(__dirname, './dist'), // 哪个目录
  filename: 'main.js' // 什么名字
  },

  6.自定义打包的入口与出口 修改默认约定
  webpack.config.js 文件中配置

  7.下载自动进行webpack打包插件，不用每次修改样式就 npm run serve 一次
  npm i webpack-dev-server@3.11.0 -D
  npm install webpack-cli --save-dev // 如果运行报错执行该行代码
  在package.json 文件进行如下配置
  "scripts": {
  "dev": "webpack serve"
  }
  运行 npm run dev 看是不是自动保存
  此时要把
  <script src="../dist/main.js"></script>
  改为
  <script src="/main.js"></script>

  8.将index.html放到文件的根目录，一打开8080端口就能看到首页

  下载插件 npm i html-webpack-plugin@4.5.0 -D

  在webpack.config.js文件下配置
  const HtmlPlugin = require('html-webpack-plugin') // 导入第8个功能所需的插件 01
  // 导入第8个功能所需的插件 02
  const html = new HtmlPlugin({
  template: './src/index.html', // 指定原文件的存放路径
  filename: './index.html' // 指定生成的文件的存放路径
  })
  module.exports = {
  // // 导入第8个功能所需的插件 03
  plugins: [html] // 通过该节点，使插件生效
  }

  然后可以把
  <script src="/main.js"></script> 注释掉了

  9.初次运行项目成功后，自动打开浏览器
  在webpack.config.js文件下配置
  devServer: {
  open: true,
  host: '127.0.0.1', // 指定主机地址
  port: 80 // 打包时用的端口号
  }

  10. webpack默认只能打包以.js的文件，需要 loader 加载器才可以处理其他文件 css less 图片
  此时导入css文件报错 import './css/index.css'

  运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D // css处理器
  npm i less-loader@10.0.1 less@4.1.1 -D //less处理器
  npm i url-loader@4.1.1 file-loader@6.2.0 -D // 图片处理器
  import img from './images/img3.png'
  $('.img').attr('src', img) // 动态导入图片

  webpack只能打包处理一部分高级的js语法，对于哪些无法处理的高级js语法 需要 babel-loader进行打包处理
  在webpack.config.js文件下配置
  npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D // 处理js高级语法
  这里还要在项目根目录创建一个 babel.config.js 的配置文件 定义规则如下
  module.exports = {
  plugins: [['@babel/plugin-proposal-decorators',{legacy: true}]]
  }

  在webpack.config.js文件下配置
  // 10 对应的功能 下载loader加载器，处理 css ，less 图片等文件
  module: {
  rules: [
  { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // css
  { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // less
  // ?limt=470 如果图片大于470字节不会转为base64格式的图片 只有图片大小 小于等于470才会被转为base64格式的图片
  { test: /\..jpg|png|gif$/, use: 'url-loader?limt=470'}, // 图片
  //exclude: /node_modules/ 在配置 babel-loader的时候 ，排除到 node_module 目录中的js文件
  { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } // 处理js高级语法
  ]
  }

  11.打包发布 时 打包发布后所有的文件都在dist目录下
  在package.json 文件进行如下配置
  "scripts": {
  "dev": "webpack serve",
  "build": "webpack --mode production" run dev build 时进行代码压缩
  },

  12 打包发布后 对dist目录的文件进行优化
  在output节点下 将filename: 'main.js' 改为 filename: 'js/main.js' 这样生成的js文件目录就时 dist/js/index.js
  output: {
  path: path.join(__dirname, './dist'), // 哪个目录
  filename: 'js/main.js' // 什么名字
  },

  图片路径优化 多添加了 &outPath=images 生成的图片路径变为 dist/images
  { test: /\.jpg|png|gif$/, use: 'url-loader?limt=470&outPath=images' }, // 图片

  13.因为每一次都要删除dist文件夹 所以配置插件自动删除 dist 文件夹
  npm i --save-dev clean-webpack-plugin

  const { CleanWebpackPlugin } = require('clean-webpack-plugin')
  在该节点下 添加 new CleanWebpackPlugin()
  // // 导入第8个功能所需的插件 03
  plugins: [html, new CleanWebpackPlugin()],
  验证是否生效，在dist目录下新建一个 1.txt

  12.Soure Map 插件 浏览器报错误的代码和原文件的应代码行数对应得上
  添加 devtool: 'eval-source-map', 在开发的时添加
  发布的时候要把 devtool: 'eval-soure-map', 删除
  或者 把 devtool: 'eval-source-map', 改为 devtool: 'nosources-source-map',
</body>

</html>